9 Important CSS Properties You Must Know

CSS can be seem to be difficult at a first glance when you’re new to it. You may be confused about the different CSS properties, what they do and what they are for. Don’t worry, I got you covered.

Have you heard of the 80/20 rule where 80% of the results come from 20% of the effort? Its the same in CSS. Which is why in this post, I’m going to talk about the most highly used CSS properties you will definitely need to know.

Its going to be a post packed full of information. Lets dig in.

1: Display

Display takes on many different values, but only 4 are most commonly used.

div {
  display: block;
  display: inline-block;
  display: inline;
  display: none;
}

• block: Many HTML elements are set to this mode of display by browsers’ stylesheets. They include <div>, <ul> and text blocks like <p>. Block level elements by default take up as much space as they can, and they cannot be placed on the same horizontal line with any other display modes, include other block elements. (Exception: unless they are floated)

With block elements, you gain the ability to alter the element’s width and height to your liking, which is why they are used for layouts

• inline: The inline mode wraps many HTML elements tighty around them and is the defaults for all elements that are not specified with any other display values. Elements can be placed side by side on the same line as inline elements. Think about the <strong> tag that bolds elements, the <em> tag that creates italics and <a> tags that allow you to link to other web pages. These are all examples of inline elements. You will not be able to change an inline element’s width and height.

• inline-block: This is one display value that combines the properties of both block elements and inline elements. You get the ability to set a height and width, and the element can appear on the same horizontal line as other elements.

• none: Display none hides the element from the website and it will not be shown visually. This is very useful for CSS Dropdown menus where additional options appear when you hover on navigation menus. The rationale is that elements are set to a display value of none initially, and the display value is changed to block on hover.

Other display values can be found on the W3 Schools website

2: Width and Height

Width and height properties are used closely with display:block and display:inline to set the width and height of HTML elements while creating a website. Common units units for Width and Height are:

• px - Pixels.
• em - A unit of measurement, where 1 em = current font size.
• rem - Root em. Same measurement as em, but makes life much easier without the inheritance problem
• % - Percentages.
• auto - highly useful unit, will explain below.

Other units of measurement can be found at the W3 Schools website. If you’re wondering about the difference between px, em and rem, check out this great article on font sizing with rem by Jonathan Snook

Extremely useful properties like max-width, min-width, max-height and min-height come into play as well when you’re making responsive websites. Here’s one example of how auto and max-width can be used to make sure images fit tightly and snugly into available space:

img {
  max-width: 100%;
  height: auto;
}

3: Margin and Padding

Margins are paddings are things that will definitely appear. Knowing how these things work will be extremely beneficial when writing CSS.

Margins and Paddings dictate the spaces between elements on your website. They are very similar and have the same units as Width and Height mentioned above.

The only difference between margins and paddings is the area the exert control over. Margins affect the area outside of borders whereas paddings affect areas inside the border. It is useful to refer to the box model below:

Ordinarily, margins are written in this manner:

div {
  margin-top: 20px;
  margin-bottom: 20px;
  margin-right: 10px;
  margin-left: 10px;
}

They can be written in shorthand to simplify the lines of codes and make it easier to read. In fact, shorthands are the standard practice and you should know them. Here’s a quick explanation:

div {
  /*  This shorthand refers to TOP, Right, Bottom, Left. Its easier to picture a clock at 12, 3, 6 and 9 respectively */
  margin: 20px 10px 20px 10px;

  /* This refers to Top, Left and Right, Bottom */
  margin: 20px 10px 20px;

  /* This refers to Top and Bottom, Left and Right */
  margin: 20px 10px;

  /* This refers to 20px worth of margin on all 4 sides */
  margin: 20px;
}

Extra tip: margins with auto on the left and right are used to center an element with a display value of block. Its written simply as:

div {
  margin: 0 auto;
}

4: Border

Borders are… borders. I’m pretty sure you don’t need an explanation of what borders are.

Borders have 3 different properties that you have take care of:

• border-width – width of the border. Same units as width and height
• border-style – style of the border. Usual values are solid and dashed. For a complete list, take a look at W3 Schools Website
• border-color – color of the border. Hex, and rgb values can be used.

Instead of writing the longer version, you could declare the border shorthand in this way:

div {
  /* border width, style and color */
  border: 1px solid black;
}

Likewise to margins and paddings, borders refer to all 4 sides. If you are only interested in applying borders to 1 or 2 sides, I generally prefer to stick by border-top, border-bottom, border-left or border-right.

5: Floats

Floats are one of the core elements in today’s website. If you see two columns of text side by side, a sidebar / content configuration like what you see on my blog if your browser window is above 800px, you have noticed floats in action. Another commonly used area for floats are navigation items.

In the nutshell, what float simply does it to position the edge of the targeted HTML content at the edge of one side of the parent container. Subsequent floats will then be placed at the edge of your first floated content. (depending on whether you float it left or right)

Floats have 3 basic properties that you might use often:

• left
• right
• none - removes the float

You may want to check out the this post on float theory as well

6: Clearing Floats

Even though floats are immensely useful, they are sometimes a headache if they are not cleared properly. In general, 2 kinds of problems may occur:

The are 3 main methods for clearing floats:

• clear: The Clear property takes in 3 values. left, right or both. As you might have suspected, clear:left; simply clears any floats on the left side, clear:right; clears floats on the right side while clear:both; ensures that all floats elements are cleared.

• overflow:hidden: This method is great for ensuring the parent element does not collapse like in problem 2. overflow:hidden; is set to the parent element to combat the problem.

• clearfix: No doubt you will have heard of or seen clearfix in tutorials. It is also set to the parent element to ensure float issues do not arise. The rationale behind the clearfix hack is to insert some content (a period) after the parent element to force the parent element to self clear since there is content after the floats.

This post by Chris Coyier has a great snippets on the clearfix hack. Read more about the clearfix hack on the pages he link to, or just head right down to the bottom section to grab the latest version.

7: Color

Color here refers to text color. It takes on a #hex value or a rgb value as with border colors.

8: Background

Background refers to the background of the HTML element. Like many CSS properties, background has a shorthand to it as well.

body {
  /* All background definitions are option, but at least one must be stated. The above are default values given to background if you have left anything undefined */
  background: transparent image-url('image.png') left top no-repeat;
}

Here are the explanations for the background properties in order from left to right:

• background-color: color of the background. Takes #hex value or an rgb value

• background-image: url(URI). Takes on the path to your image. Use the example above if the image is in the same folder.

  To go down one folder, simple type the file name before the image.png. Example: css/image.png.

  To go up one folder, type the file name with ”../“. Example: ../css/image.png

• background-repeat: whether you would like the background to repeat if the width exceeds the background size. Other values are repeat, repeat-x and repeat-y.

• background-position: position of the background relative to the HTML element. Two values are needed here, X and Y, where X is the amount of offset from the left and Y is the amount of offset from the top. Takes on either unit values (as with width and height) or left,center,right and top,center,bottom for left and right respectively.

9: Font

Fonts in general refer to the appearance of text in your website. There are a few things to look out for. Like other properties, font has a shorthand. Do note that it is common to see the font shorthand declaration only once in the whole CSS file. It is common to use the different properties at other times:

body {
  /* font shorthand */
  font:
    italic small-caps bold 20px/1.5 'Proxima Nova',
    helvetica,
    arial,
    sans-serif;
}

Here are the explanations for the font properties in order from left to right:

• font-style: Style of the font. valid values are either italic or normal. Defaults to normal. Optional property in font shorthand

• font-variant: variant of the font. valid values are normal and small caps. Defaults to normal. Optional property in font shorthand and is not often used

• font-weight: weight of font. determines if text is bold. valid values are normal, bold, bolder, or 100 - 900. Optional property in font shorthand

• font-size: size of font. Takes a value thats the same as width and height

• line-height: determines the amount of space above and below the text. Very important to ensure good readability. Takes on the same values as font, and also a unitless value. If a unitless value is used, it means the line height is a multiple of the value provided.

• font-family: area to declare typefaces and fontstack that you would like to use.

Conclusion

Thats it. Listed above are the 9 CSS properties that you absolutely must know. What’s left for you to do now is to keep this page somewhere as a backup if you are unsure of the important CSS properties you need to remember. If you found this post useful, please do me a favor and share it with others over twitter or facebook.

Now code away!